<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE 中台管理系统参数</title>
    <!-- Import style -->
    <link rel="stylesheet" href="../../static/vendor/element-plus@2.3.6/dist/index.css" />
    <link rel="stylesheet" href="../../static/vendor/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
    <!-- Import Vue 3 -->
    <script src="../../static/vendor/vue@3.3.4/dist/vue.global.prod.js"></script>
    <!-- Import component library -->
    <script src="../../static/vendor/element-plus@2.3.6/dist/index.full.min.js"></script>
    <style>
        html {
            font-size: 13px
        }
    </style>
</head>

<body>
    <div id="app" class="contanier-fluid">
        <div>
            <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="(item,idx) of products" :label="item.id">{{item.text}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <div v-for="(item,idx) of data" :key="idx">
            <div class="fw-bold bg-secondary-subtle p-1">{{item.text}}</div>
            <div class="row gx-5" v-for="(item2,idx2) of item.children" :key="idx2">
                <div class="col-2 border-bottom">
                    <div class="p-1">{{item2.text}}</div>
                </div>
                <div class="col-2 border-bottom border-start" v-for="(item3,idx3) of item2.items" :key="idx3">
                    <div class="text-break" v-if="typeof(item3.value)=='object'">
                        <div v-for="(item4,idx4) of item3.value" :key="idx4"><a :href="item4.value" target="_blank">{{item4.text}}</a></div>
                    </div>
                    <div class="text-break" v-else>{{item3.value}}</div>
                </div>
            </div>
        </div>
    </div>
    <script src="./data/vue-pro.js"></script>
    <script>
        const RootComponent = {
            data() {
                return {
                    version: '1.0.0',
                    data: data.data,
                    products:data.names,
                    checkList:[],
                }
            },
        }
        var app = Vue.createApp(RootComponent);
        app.use(ElementPlus);
        app.mount('#app')
    </script>
</body>

</html>